<template>
  	<el-dialog
	  
	  :visible.sync="dialogVisible"
	  width="60%"
	  >
     
        <div class="tit_name line1" slot="title">
        <div class="p1">{{shopInfo.storeName||shopInfo.shopName||''}}</div>
      </div>
     
      
      <div class="shopIntroduc" style="margin-top:14px">
        <div class="shopIntroduc_left">
            <div class="p2" style="border-color:#999999; font-size:20px;color:#999999;width: 91px;margin-right:16px;font-weight: 600;">店铺介绍</div>
            <div class="p3 " style="font-size:20px;font-weight: 400;">
                <pack-up-text2 :text="shopInfo.storeIntroduction||shopInfo.shopIntroduce||''"></pack-up-text2>
            </div>
        </div>
      </div>
      <div class="shopIntroduc" style="margin-bottom:18px;margin-top:18px;">
        <div class="shopIntroduc_left">
            <div class="p2" style="border-right-width:0;font-size: 20px;color: #333333;font-weight: 500;" >门店位置：</div>
            <!-- <div class="p3 ">{{shopInfo.officeAddress}}</div> -->
             
        </div>
      </div>
      <div style="padding-left:45px;padding-right:45px;padding-bottom:65px;">
        <div id="containepic" style="width: 100%;height: 324px;"></div>
      </div>
      
		
    </el-dialog>
</template>

<script>
export default {
    data(){
        return {
            dialogVisible:false,
            shopInfo:{},
            markersArray:[],
            latitude:'',
				longitude:'',
				markersArray:[],
				select:'',
				address:'',
				searchstate:false,
				addressList:[],
				addressitem:{},
				addresstate:false,
        }
    },

    methods:{
        openDialoag(shopInfo){
            this.shopInfo=shopInfo||{}
            this.dialogVisible = true
            setTimeout(()=>{
               this.initMap(shopInfo.longitude,shopInfo.latitude)
            },100)

        },
        initMap(longitude, latitude) { 
            var that = this;
            let address = "";
            // let lat = longitude||"36.752508224779746";
            // let logt = latitude||"119.97121810913086";
            let lat ="36.752508224779746";
            let logt = "119.97121810913086";
            var center = new qq.maps.LatLng(lat, logt);

            var map = new qq.maps.Map(document.getElementById("containepic"), {
                center: center,
                zoom: 13,
                disableDefaultUI: true,
            });
            var marker = new qq.maps.Marker({
                position: center,
                map: map,
            });
            that.markersArray.push(marker);
            var infoWin = new qq.maps.InfoWindow({
                map: map,
            }); //此处是点击地图后生成的地标名称
            var geocoder = new qq.maps.Geocoder({
                complete: function(res) {
                    that.deleteOverlays();
                    map.setCenter(res.detail.location);
                    var marker = new qq.maps.Marker({
                        map: map,
                        position: res.detail.location,
                    });
                    that.markersArray.push(marker);
                },
            });
            console.log(document.getElementById("containepic"));
            qq.maps.event.addListener(map, "click", function(event) {
                // that.deleteOverlays();
                // console.log(event,'点击后的地址');
                // that.latitude = event.latLng.getLat();
                // that.longiistude = event.latLng.getLng();
      
                // var position = new qq.maps.LatLng(that.inputForm.latitude, that.inputForm.longitude);
                // var marker = new qq.maps.Marker({
                //     map: map,
                //     position: position
                // });
                // console.log(that.latitude,that.longiistude);
                // that.markersArray.push(marker);
                // that.init(event.latLng.getLat()+','+event.latLng.getLng())
            });
            // document.getElementById("handleinput").addEventListener("blur", function() {
            // 	geocoder.getLocation(that.inputForm.shopAddress);
            // });
        },
        init(location){
            let data ={
                key:"ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
                location:location,
                output:'jsonp'
            }
            this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/',data).then((data)=>{
                data.result.ad_info.address = data.result.address
                this.addressitem = data.result.ad_info
            })
        },
        			deleteOverlays() {
				if (this.markersArray) {
					for (var i in this.markersArray) {
						this.markersArray[i].setMap(null);
					}
			 	this.markersArray.length = 0;
				}
			},
    }
}
</script>

<style lang='less' scoped>
/deep/.el-dialog__headerbtn{
  right: 24px;
  top: 30px;
}
/deep/.el-dialog__headerbtn .el-dialog__close{
  color: #333333;
  font-weight: 600;
  font-size: 32px;
}
.tit_name {
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 30px;
  padding-left: 45px;
  width:100%;
  height:45px;
  line-height: 45px;
  font-weight: 600;
  div {
    display: inline-block;
    vertical-align: middle;
  }
  .p1 {
    font-size: 26px;
    color: #333333;
    font-weight: 600;
    margin-right: 48px;
    width: auto;
    max-width: 600px;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.shopIntroduc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  margin-top: 15px;
  .shopIntroduc_left {
    padding-left:45px;
    padding-right:45px;
    display: flex;
    align-items: center;
    .p3 {
      font-size: 18px;
      color: #333333;
      width: 640px;
    }
    .p2 {
      font-size: 18px;
      color: #333333;
      // width: 92px;
      border-right: 1px solid #333333;
      // margin-right: 10px;
    }
  }
  .shopIntroduc_right {
    img {
      width: 33px;
      height: 33px;
    }
  }
}
/deep/.el-dialog__body{
  padding-top: 0;
}
</style>